<template>
  <div class="good-card container van-hairline--bottom">
    <van-card
      v-tosse="num"
      ref="card"
      :origin-price="goodView.origin_price"
      :price="goodView.price"
      :desc="good.desc"
      :title="good.title"
      :thumb="good.images[0]"
    >
      <template #tags>
        <van-tag
          class="tag"
          plain
          color="#ff1a90"
          v-for="tag in good.tags"
          :key="tag"
          >{{ tag }}</van-tag
        >
      </template>
      <template #num>
        <hgroup>
          <img
            v-show="num > 0"
            @touchend="counter(-1)"
            src="https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/rec.png"
            alt=""
          />
          <span v-show="num > 0">{{ num }}</span>
          <img
            @touchend="counter(1)"
            src="https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/add.png"
            alt=""
          />
        </hgroup>
      </template>
    </van-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import tosse from '@/directives/cart_tosse';

export default {
  props: {
    good: {
      type: Object,
      require: true,
    },
  },
  directives: { tosse },
  computed: {
    ...mapState(['counterMap']),
    num() {
      return this.counterMap[this.good.id] || 0;
    },
    goodView() {
      const { price_off, price } = this.good;
      if (price_off === null) {
        return { price, origin_price: null };
      }
      return { price: price_off, origin_price: price };
    },
  },
  methods: {
    counter(num) {
      this.$store.commit('changeStorage', { id: this.good.id, value: num });
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .van-card {
  background: #fff;
}
::v-deep .van-card__title {
  color: #000;
}
::v-deep .van-card__desc {
  transform: scale(0.9);
  transform-origin: left center;
}
.tag {
  margin-right: 5px;
}
hgroup {
  display: flex;
  align-items: center;
  height: 20px;
  span {
    margin: 0 5px;
    color: #323233;
    font-size: 14px;
  }
  img {
    width: 16px;
  }
}
</style>
